<template>
  <div class="login-container">
    <!-- <video :src="require('@/assets/video/180825_01_laptop.mp4')" autoplay class="video" loop /> -->
    <img src="./loginBg.jpg" style="width:100%" class="video">
    <div class="flex-center" style="margin-top:100px">
      <img :src="require('@/assets/images/logo.png')" height="80">
    </div>
    <el-card class="box-card" shadow="always">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <!-- nav  -->
        <div>
          <!--页面切换-->
          <div class="input-grid">
            <el-row type="flex" justify="center">
              <el-button-group>
                <el-button>
                  <i class="iconfont icon-diannao" />账号密码登陆
                </el-button>
              </el-button-group>
            </el-row>
            <!--账号密码登陆-->
            <div class="login-main">
              <el-form-item prop="Account">
                <el-input
                  ref="Account"
                  v-model="loginForm.Account"
                  placeholder="登录账号"
                  name="请输入账号"
                  type="text"
                  tabindex="1"
                  auto-complete="on"
                  @blur="AccountBlur"
                >
                  <span slot="prefix" class="svg-container">
                    <svg-icon icon-class="user" />
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item prop="Pwd">
                <el-input
                  :key="passwordType"
                  ref="Pwd"
                  v-model="loginForm.Pwd"
                  :type="passwordType"
                  placeholder="请输入密码"
                  name="password"
                  tabindex="2"
                  auto-complete="on"
                >
                  <span slot="prefix" class="svg-container">
                    <svg-icon icon-class="password" />
                  </span>
                  <span slot="suffix" class="show-pwd" @click="showPwd">
                    <svg-icon
                      :icon-class="
                        passwordType === 'password' ? 'eye' : 'eye-open'
                      "
                    />
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item>
                <label style="color:gray;">系统管理员:admin/admin &nbsp;&nbsp;&nbsp;&nbsp;登录后可查看其它登录账户</label><br>
                <label>请温柔体验,服务器配置比较低,请谅解</label>
              </el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                style="width: 100%; margin-bottom: 30px; margin-top: 20px"
                @click.native.prevent="Login"
              >登录</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { WOW } from 'wowjs'
import { getqrcodepic } from '@/api/user/user'
import 'signalr'
export default {
  name: 'Login',

  data() {
    // const validatePassword = (rule, value, callback) => {
    //     if (value.length < 6) {
    //       callback(new Error('The password can not be less than 6 digits'))
    //     } else {
    //       callback()
    //     }
    //   }
    return {

      activeIndex: '0',
      dialogVisible4: false,
      showRightBtn: 'hidden',
      navbg: 'nobg',

      loginForm: {
        Account: '',
        Pwd: '',
        PwdAgian: '',
        SmsCode: ''
      },
      loginRules: {
        Account: [
          { required: true, trigger: 'blur', message: '请输入登录账号' }
        ],
        Pwd: [
          { required: true, trigger: 'blur', message: '请输入登录密码' }
        ]
        // password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      loginType: '0',
      copyRight: new Date().getFullYear(),
      content: '发送验证码',
      totalTime: 60,
      canClick: true, // 添加canClick
      connection: {},
      chatHubProxy: {},
      qrcodeurl: '',
      clientId: '123123',
      dialogFormVisible: false, // 绑定手机号弹窗是否显示
      bindFormtemp: {
        TUserId: '',
        Account: '',
        SmsCode: ''
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    // console.log(this.$store.getters.base_url);
    // console.log(this.$router.currentRoute);
  },
  mounted() {
    // const code = this.$route.query.code // getUrlParam('code')
    // // console.log("code:" + code);
    // if (code !== null) {
    //   // 如果是微信登陆
    //   // 根据code获取access_token
    //   // wxlogin(code).then( res=>{
    //   //   let access_token= res.access_token
    //   //   let openid= res.openid
    //   //   console.log('access_token:'+access_token+ 'openid:'+openid)
    //   // })
    //   this.loading = true
    //   this.$store
    //     .dispatch('user/wxlogin', code)
    //     .then(() => {
    //       this.$router.push({ path: this.redirect || '/' })
    //       this.loading = false
    //     })
    //     .catch(() => {
    //       this.loading = false
    //     })
    // }

    // this.getqrcodepic()
    window.addEventListener('scroll', this.handleScroll)
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animate__animated',
      offset: 0,
      mobile: true
    })
    wow.init()
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || 	document.body.scrollTop
      if (scrollTop > 200) {
        this.navbg = 'nav-fixed'
        this.showRightBtn = 'right-button'
      } else {
        this.navbg = 'nobg'
        this.showRightBtn = 'hidden'
      }
    },
    connectionserver() {
      var _this = this
      this.connection = $.hubConnection('https://pfapibx.ymion.com', {
        qs: 'clientId=' + _this.clientId
      })
      this.chatHubProxy = this.connection.createHubProxy('loginhub')
      this.chatHubProxy.on('clientMethod', (data) => {
        console.log('scanlogin--data', data)
        if (data.Type === 'login') {
          this.loading = true
          this.$store
            .dispatch('user/scanlogin', data.UId)
            .then((res) => {
              // console.log('scanlogin', res)
              this.loading = false
              if (res === 'toindex') {
                this.$router.replace({ path: this.redirect || '/' })
              } else {
                this.$router.push({ path: '/verify' })
              }
            })
            .catch(() => {})
        } else {
          // 绑手机号
          _this.bindFormtemp.TUserId = data.UId
          _this.dialogFormVisible = true
        }
      })
      // 开始连接 jsonp是开启跨域
      this.connection
        .start({ jsonp: true })
        .done((connection) => {
          console.log('connection', connection)
        })
        .fail((err) => {
          console.log(err)
        })
    },
    getqrcodepic() {
      getqrcodepic().then((res) => {
        this.qrcodeurl = res.Data
        this.clientId = res.Msg
        this.connectionserver()
      })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    AccountBlur() {
      this.loginForm.Account = this.loginForm.Account.trim()
    },
    Login() {
      // // 调用后台方法，参数形式可以和后台协商
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((res) => {
              this.loading = false
              this.$router.replace({ path: '/' })
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    loginWithName() {
      this.loginType = '1'
    },
    loginWithWechat() {
      this.loginType = '0'
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }

  }
}

</script>
<style lang="scss" scoped>
.login-container {
    min-height:calc(100vh);
    width: 100%;
   // background-color: #2d3a4b;
    background-image: './loginBg.jpg' no-replace;
    overflow: hidden;
}
.el-card{

  background: #fff;
 width: 400px;
    height: 450px;
  margin:50px auto 0;
  padding:40px 20px 20px;
  border-radius: 4px;

}
.login-main{
  margin-top: 100px;
}
 .active{
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
.video{
  width: 100%;
  position: fixed;
  top:0;
  left: 0;
  z-index: -1;
  padding-top:0px;
}
</style>
